<template>
  <p v-memo="[]" v-cloak>{{ num }}</p>
  <p v-pre>{{ num }}</p>
  <p v-once>{{ num }}</p>
  <button @click="num++">更新</button>

  <Child v-model="num" />
</template>

<script lang="ts">
/*
  常用指令
    v-bind 
      单向数据绑定（强制绑定数据）（给标签属性绑定一个动态的值）
      简写：:
      语法：:属性名="JS表达式"

      vue2中，v-bind:xxx.sync="xxx" 用于父子组件双向通信
      vue3中，移除.sync
    
    v-model
      双向数据绑定
        v-model给元素绑定：
          1. input和textarea，绑定value属性和input事件
          2. radio和checkbox，绑定checked属性和change事件
          3. select，绑定value属性和change事件

      v-model组件使用
        vue2中，绑定value属性和input自定义事件
        vue3中, 绑定modelValue属性和update:modelValue事件

        vue2中，未通过props声明接受的属性，在$attrs中，自定义事件回调在$listeners
        vue3中，删除$listeners，未通过props声明接受的属性和事件回调函数都在$attrs

    v-if / v-else-if / v-else
      条件渲染（让元素显示隐藏）
    v-show
      条件渲染（让元素显示隐藏）

      v-if和v-show的区别？
        v-if隐藏时会删除这个元素（删除组件，组件会触发卸载流程）
        v-show隐藏时通过display:none隐藏（隐藏组件）

    v-on
      绑定事件
      简写：@xxx="xxx"
      事件修饰符：@xxx.prevent

      vue2中，给组件绑定事件默认是自定义事件，加上.native绑定事件，就是DOM事件
      vue3中，给组件绑定事件默认是DOM事件，除非emits接受事件，就是自定义事件
        vue3移除了.native修饰符

    v-for
      列表渲染
      语法：v-for="(item, index) in xxx" :key="item.id"
      问题：
        key有啥用？ 
          diff算法中，尽量复用DOM元素

        key的值用啥？
          必须用唯一的标识符，id

    v-slot
      插槽：具名插槽和作用域插槽

      v-slot:xxx="{ xxx }"
      简写：#xxx="{ xxx }"  #yyy

  新增指令
    v-memo 缓存组件中的部分元素
      
      缓存整个组件：keep-alive
      缓存组件中的部分元素：v-memo

      v-memo="[xx, yy]" 当依赖的数据发生变化，才会重新渲染

  不常用指令（了解）
    v-html 渲染标签文本内容（标签字符串解析成DOM元素）
    v-text 渲染标签文本内容
    v-once 只渲染一次
    v-pre  原封不动渲染（里面的所有模板语法不会被解析）
    v-cloak 防止闪现
*/
import Child from "./Child.vue";

export default {
  name: "App",
  components: {
    Child,
  },
  data() {
    return {
      num: 0,
    };
  },
};
</script>

<style scoped>
[v-cloak] {
  display: none;
}
</style>
